<template>
  <div class='container'>
    <el-card style="margin: 5px">
      <!-- 新增试题 -->
      <el-row
        type="flex"
        justify="chetre"
      >
        <el-col>
          <span>说明：目前支持学科和关键字条件筛选</span>
        </el-col>
        <el-col>
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              size="small"
              type="success"
              icon="el-icon-edit"
              @click="tiaoxin"
            >新增试题</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 新增试题 -->
      <!-- 关键词搜索区域 -->
      <el-form style="margin-top: 30px">
        <!-- 一 -->
        <el-row
          type="flex"
          justify="end"
          align="middle"
        >
          <el-col :span="6">
            <el-row
              type="flex"
              justify="end"
            >
              <el-col>
                <el-form-item label="学科">
                  <el-select
                    style="width: 250px"
                    v-model="formData.subjectID"
                  >
                    <el-option
                      v-for="(item,index) in subject"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select style="width: 250px"></el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select
                style="width: 250px"
                v-model="formData.tags"
              >
                <el-option
                  v-for="(item,index) in catalogue"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input
                style="width: 250px"
                v-model="formData.keyword"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 二 -->
        <el-row
          type="flex"
          justify="end"
          align="middle"
        >
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                style="width: 250px"
                v-model="formData.questionType"
              >
                <el-option
                  v-for="(item,index) in questionType"
                  :key="index"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row
              type="flex"
              justify="end"
            >
              <el-col>
                <el-form-item label="难度">
                  <el-select
                    style="width: 250px"
                    v-model="formData.difficulty"
                  >
                    <el-option
                      v-for="(item,index) in difficulty"
                      :key="index"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                style="width: 250px"
                v-model="formData.direction"
              >
                <el-option
                  v-for="item in direction"
                  :key="item"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="收录人">
              <el-input
                style="width: 250px"
                v-model="formData.creatorID"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 三 -->
        <el-row
          type="flex"
          justify="end"
          align="middle"
        >
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input
                style="width: 250px"
                v-model="formData.remarks"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简介">
              <el-input
                style="width: 250px"
                v-model="formData.shortName"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-row
              type="flex"
              align="middle"
            >
              <span class="chengshi">城市</span>
              <el-form-item>
                <el-select
                  style="width: 125px"
                  @focus="cheng"
                  v-model="formData.province"
                >
                  <el-option
                    v-for="(item,index) in datas"
                    :key="index"
                    :label="item.city"
                    :value="item.city"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-select
                  style="width: 125px"
                  @focus="shi"
                  v-model="formData.city"
                >
                  <el-option
                    :v-if="formData.city"
                    v-for="(item,index) in area"
                    :key="index"
                    :label="item"
                    :value="item"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-row>
          </el-col>
          <el-col :span="6">
            <el-row
              type="flex"
              justify="end"
              align="top"
            >
              <el-col style="margin-left: 182px; margin-bottom: 25px ">
                <el-button
                  size="mini"
                  @click="qingchu"
                >清除</el-button>
                <el-button
                  size="mini"
                  @click="btnOKK"
                  type="primary"
                >搜素</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </el-form>
      <!-- 关键词搜索区域 -->
      <!-- 警告条 -->
      <el-alert
        :title="`数据一共 ${page.counts} 条`"
        type="info"
        show-icon
      >
      </el-alert>
      <!-- 警告条 -->
      <!-- 表格 -->
      <el-table :data="list">
        <el-table-column
          prop="number"
          label="试题编号"
        ></el-table-column>
        <el-table-column
          prop="subjectID"
          label="学科"
          :formatter="subjectOK"
        ></el-table-column>
        <el-table-column
          prop="catalogID"
          label="目录"
          :formatter="catalogueOK"
        ></el-table-column>
        <el-table-column
          prop="questionType"
          label="题型"
          :formatter="questionOK"
        ></el-table-column>
        <el-table-column
          prop="question"
          label="题干"
          :formatter="questionStemOK"
        ></el-table-column>
        <el-table-column
          prop="addDate"
          label="录入时间"
        ></el-table-column>
        <el-table-column
          prop="difficulty"
          label="难度"
          :formatter="nanduOK"
        ></el-table-column>
        <el-table-column
          prop="creator"
          label="收录人"
        ></el-table-column>
        <el-table-column
          width="200px"
          label="操作"
        >
          <template v-slot="{ row }">
            <el-button
              icon="el-icon-view"
              circle
              size="small"
              @click="preview(row)"
              type="primary"
            ></el-button>
            <el-button
              icon="el-icon-edit"
              circle
              size="small"
              type="success"
              @click="tiaoxin(row)"
            ></el-button>
            <el-button
              icon="el-icon-delete"
              circle
              size="small"
              @click="delBtn(row)"
              type="danger"
            ></el-button>
            <el-button
              icon="el-icon-check"
              circle
              size="small"
              @click="choiceAdd(row)"
              type="warning"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格 -->
      <!-- 分页器 -->
      <el-row
        type="flex"
        justify="end"
      >
        <el-col style="position: relative; left: 830px;">
          <el-pagination
            background
            layout="prev, pager, next, sizes, jumper"
            :total="page.counts"
            :current-page="page.page"
            :page-count="page.pagesize"
            :page-sizes="[5, 20, 50]"
            @current-change="flipOver"
            @size-change="flipOvers"
          >
          </el-pagination>
        </el-col>
      </el-row>
    </el-card>
    <!-- 弹出层 -->
    <Dd
      :shouDia.sync="shouDia"
      :rows="rows"
      :subject="subject"
      :catalogue="catalogue"
    ></Dd>
  </div>
</template>

<script>
import { list, remove, choiceAdd } from '@/api/hmmm/questions'
import { simple } from '@/api/hmmm/subjects'
import { simple as catalogue } from '@/api/hmmm/directorys'
import { questionType, difficulty, direction } from '@/api/hmmm/constants'
import { datas } from '@/api/hmmm/citys'

import Dd from './dd.vue'
export default {
  components: {
    Dd
  },
  name: 'isoo',
  data () {
    return {
      list: [],
      page: {
        page: 1,
        pagesize: 5,
        counts: null
      },
      area: '', // 城区
      datas: '', // 城市
      subject: [], // 学科标签
      catalogue: [], // 目录枚举
      questionType, // 题型
      difficulty, // 难度
      shouDia: false, // 弹出层
      rows: null, // 详情弹出层
      direction: null, // 方向
      formData: {
        subjectID: '', // 学科
        catalogue: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 收录人
        remarks: '', // 题目备注
        shortName: '', // 企业简介
        province: '', // 城市
        city: '' // 城区
      }
    }
  },
  created () {
    this.listData() // 获取基础题库列表
    this.simple() // 标签
    this.catalogueData() // 目录
    console.log(direction, datas)
  },
  methods: {
    async listData () {
      const { data } = await list(this.page)
      this.page.counts = data.counts
      this.list = data.items
    },
    // 翻页
    flipOver (node) {
      this.page.page = node // 当前页数
      this.listData()// 重新拉取数据
    },
    // 每页个数
    flipOvers (node) {
      this.page.pagesize = node // 当前页数
      this.listData()// 重新拉取数据
    },
    // 标签列表
    async simple () {
      const { data } = await simple()
      this.subject = data
    },
    // 格式化学科列表
    subjectOK (cellValue) {
      const subjectObj = this.subject.find(item => item.value === cellValue.subjectID)
      return subjectObj ? subjectObj.label : '未知'
    },
    // 目录列表
    async catalogueData () {
      const { data } = await catalogue()
      this.catalogue = data
    },
    // 格式化目录列表
    catalogueOK (cellValue) {
      const catalogueObj = this.catalogue.find(item => item.value === cellValue.catalogID)
      return catalogueObj ? catalogueObj.label : '未知'
    },
    // 题型格式化
    questionOK (cellValue) {
      const obj = this.questionType.find(item => item.value === Number(cellValue.questionType))
      return obj ? obj.label : ''
    },
    // 难度格式化
    nanduOK (cellValue) {
      const difficultyobj = this.difficulty.find(item => item.value === Number(cellValue.difficulty))
      return difficultyobj ? difficultyobj.label : ''
    },
    // 清除当前的信息
    delBtn (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?').then(async isOK => {
        if (isOK) {
          await remove(row)
          console.log(isOK)
          this.$message.success('清除成功')
          this.listData() // 更新数据
        }
      })
    },
    // 加入精选题库
    async choiceAdd (row) {
      try {
        await this.$confirm('此操作将该题目加入精选, 是否继续?')
        this.$message.success('加入精选题库成功')
        await choiceAdd({ ...row, choiceState: 1 })
        this.listData() // 更新数据
      } catch (err) {
        console.log(err)
      }
    },
    // 预览
    preview (row) {
      this.rows = row
      this.shouDia = true
    },
    // 跳转新增页面
    tiaoxin (row) {
      this.$router.push(`/questions/new?id=${row.id}`)
    },
    // 城市
    cheng () {
      this.datas = datas
    },
    // 城区
    shi () {
      const result = this.datas.find(item => item.city === this.formData.city)
      this.area = result.area
    },
    // 搜索
    async btnOKK () {
      const { data } = await list({ ...this.formData, ...this.page })
      this.page.counts = data.counts
      this.list = data.items
    },
    // 清除
    qingchu () {
      this.formData = {
        subjectID: '', // 学科
        catalogue: '', // 标签
        keyword: '', // 关键字
        questionType: '', // 试题类型
        difficulty: '', // 难度
        direction: '', // 方向
        creatorID: '', // 收录人
        remarks: '', // 题目备注
        shortName: '', // 企业简介
        province: '', // 城市
        city: '' // 城区
      }
    }

  }
}
</script>

<style scoped lang='css'>
.el-col-24 {
  width: 92%;
}
.el-col-6 {
  width: 98%;
}
.chengshi {
  font-size: 14px;
  font-weight: 700;
  color: #666;
  margin: 0 10px 23px 2px;
}
</style>
